<template>
  <div class="c-bg-white c-pt24">
    <div class="c-flex-row c-justify-sb c-aligni-center c-ph24">
      <div class="c-fs26 c-fc-xblack">相关讨论</div>
      <div
        class="c-fs22 c-fc-sblack c-flex-row c-flex-center"
        @click="handleClickOpenRelation"
      >
        全部
        <i class="iconfont c-pl8">&#xe635;</i>
      </div>
    </div>
    <div class="c-ph24 c-pv24 c-w100 c-ws-n c-contexty-hidden c-contextX-scroll c-flex-row">
      <template v-for="(item, index) in circleRelationList">
        <div
          class="c-flex-column c-aligni-center c-br20 c-bg-white boxThemeItem c-mr16"
          :class="index == circleRelationList.length - 1 ? '':'c-mr16'"
          :key="index"
          @click="joinThemeCircle(item)"
          v-if="index < 3"
        >
          <div class="c-ww332 c-pt24 c-pb24 c-pl28 c-pr32">
            <div class="c-fs24 c-fc-xblack c-text-ellipsis1">
              <i class="iconfont c-pr8 theme-fc">&#xe6fd;</i>
              {{item.themeName}}
            </div>
            <div class="c-fs20 c-fc-gray c-pv12">
              <span>{{item.memberCount | formatTenThousand}}人加入</span> |
              <span>{{item.feedCount | formatTenThousand}}条动态</span>
            </div>
            <div class="theme-fc c-fs20 c-flex-row c-aligni-center">
              去讨论
              <i class="iconfont c-pl8 c-fs20">&#xe635;</i>
            </div>
          </div>
        </div>
      </template>
    </div>
    <open-modal
      :openModal="showOpenRelationModal"
      @closeModal="handleClickCloseRelation"
    >
      <div class="c-bg-white c-br-tl20 c-br-tr20 c-text-hidden c-hh640">
        <div class="c-p c-ph24">
          <div class="c-w100 c-flex-row c-justify-sb c-aligni-center c-hh88 c-fc-xblack c-bd-b1">
            <div class="c-fs28">该商品相关主题讨论</div>
            <i
              class="iconfont c-fc-sgray c-fs30"
              @click="handleClickCloseRelation"
            >&#xe84e;</i>
          </div>
        </div>
        <div class="c-w100 c-bg-white c-hh540 c-contexty-scroll c-scroll-touch">
          <div class="c-w100 c-ph24">
            <div
              class="c-flex-column c-pv24 "
              v-for="(item, index) in circleRelationList"
              :key="index"
              @click="joinThemeCircle(item)"
              :class="index == circleRelationList.length - 1 ? '':'c-bd-b1'"
            >
              <div class="c-fs24 c-fc-xblack c-text-ellipsis2">
                <i class="iconfont theme-fc c-pr8">&#xe6fd;</i>
                {{item.themeName}}
              </div>
              <div class="c-mt12 c-flex-row c-justify-sb c-fs20 c-fc-gray c-aligni-center">
                <div>
                  <span>{{item.memberCount | formatTenThousand}}人加入</span> |
                  <span>{{item.feedCount | formatTenThousand}}条动态</span>
                </div>
                <div class="theme-fc c-fs20 c-flex-row c-aligni-center">
                  去讨论
                  <i class="iconfont c-pl8 c-fs20">&#xe635;</i>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </open-modal>
  </div>
</template>

<script>
import OpenModal from "@/components/templates/common/openModal.vue";
export default {
  name: 'CircleRelation',
  components: {
    OpenModal
  },
  props: {
    circleRelationList: {
      type: Array,
      default: []
    },
    showOpenRelationModal: {
      type: Boolean,
      default: false,
    }
  },
  methods: {
    handleClickCloseRelation() {
      this.$emit('handleClickCloseRelation')
    },
    handleClickOpenRelation() {
      this.$emit('handleClickOpenRelation')
    },
    joinThemeCircle(item) {
      this.$routerGo(this, "push", {
        path: `/homePage/circle/circleTheme`,
        query: {
          themeId: item.themeId
        }
      })
    }
  },
}
</script>

<style lang="scss" scoped>
.boxThemeItem {
  box-shadow: 0px 0px 8px 0px rgba(0, 0, 0, 0.1);
}
</style>